import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

export interface IRadioProps {
  name?: string;
  checked?: boolean; // 从外部可以控制 是否选中
  value?: string;
  onChange?: () => void;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

const propTypes = {
  name: PropTypes.string,
  checked: PropTypes.bool, // 从外部可以控制 是否选中
  value: PropTypes.string,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  className: PropTypes.string,
  style: PropTypes.object,
};

export const Radio: React.SFC<IRadioProps> = (props: IRadioProps) => {
  const { name, checked, disabled, style } = props;
  let classString = '';
  const className = 'radio-box';
  if (checked) {
    classString = `radio-checked ${className}`;
  } else if (disabled) {
    classString = `radio-disabled ${className}`;
  } else {
    classString = `${className}`;
  }
  return <label className={classNames('radio-wrapper', className)} style={style}>
    <span className={classString}>
      <input type="radio" {...props} className="radio-box-input" />
      <span className="radio-box-inner"></span>
    </span>
    <span className="radio-name">{name}</span>
  </label>;
};

Radio.propTypes = propTypes;
